<template>
	<view>
		<uni-card>
			<uni-list-item showArrow :border="false">
				<template v-slot:header>
					<view>
						<image class="user-image" :src="merchantInfo.logo"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="user-info">
						<text class="black-color big bold user-name ">{{merchantInfo.name}}</text>
					</view>
				</template>
			</uni-list-item>
		</uni-card>
		
		<uni-card>
			<uni-list-item showArrow :border="false" class="list">
				<template v-slot:header>
					<view class="list-icon">
						<uni-icons type="phone" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="list-text">
						<text class="black-color big">修改手机号</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showArrow class="list">
				<template v-slot:header>
					<view class="list-icon">
						<uni-icons type="compose" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="list-text">
						<text class="black-color big">修改密码</text>
					</view>
				</template>
			</uni-list-item>
		</uni-card>
		
		<uni-card>
			<uni-list-item showArrow :border="false" class="list">
				<template v-slot:header>
					<view class="list-icon">
						<uni-icons type="help" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="list-text">
						<text class="black-color big">使用指南</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showArrow class="list">
				<template v-slot:header>
					<view class="list-icon">
						<uni-icons type="chatboxes" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="list-text">
						<text class="black-color big">意见反馈</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showArrow class="list">
				<template v-slot:header>
					<view class="list-icon">
						<uni-icons type="staff" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="list-text">
						<text class="black-color big">关于我们</text>
					</view>
				</template>
			</uni-list-item>
		</uni-card>
		<view>
			<u-button class="log-btn middle black-color" @click="logoutClick()">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantInfo: '',
			}
		},
		onShow() {
			//uni.setStorageSync('merchantName','wx465386');
			this.getMerchant();
		},
		methods: {
			getMerchant() {
				uniCloud.callFunction({
						name: 'getMerchantInfo',
						data: {
							'_id': uni.getStorageSync('merchantId'),
						}
					})
					.then(res => {
						this.merchantInfo = res.result.data[0];
					})
					.catch(error => {
						console.log(error);
					});
			},
			logoutClick(){
				uni.clearStorageSync();
				uni.showToast({
					title:'退出成功',
					icon:'none'
				})
				uni.navigateTo({
					url:"../login/login"
				})
			}
		}
	}
</script>

<style>
	.small {
		font-size: 20rpx;
	}

	.middle {
		font-size: 25rpx;
	}

	.big {
		font-size: 30rpx;
	}

	.bold {
		font-weight: bold;
	}

	.green-color {
		color: #296844;
	}

	.black-color {
		color: black;
	}

	.red-color {
		color: brown;
	}

	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.user-image {
		display: block;
		margin: 0 auto;
		width: 60px;
		height: 60px;
		border-radius: 5px;
		margin-right: 30rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user-name {
		font-size: 40rpx;
	}
	
	.list{
		padding: 5rpx 0 5rpx 0;
	}
	
	.list-icon{
		margin-right: 20rpx;
		margin-top: 10rpx;
	}
	
	.list-text{
		margin-top: 13rpx;
	}
	
	.log-btn {
		width: 40%;
		border-radius: 40rpx;
		border: 1px solid #296844;
		background-color: rgba(123, 197, 111, 0.7);
	}
</style>